<template>
	<view>
		<!-- 头部提示 -->
		<navbar :backshow="false" :title="title" :navBarHeight="navBarHeight" :menuRight="menuRight" :menuTop="menuTop"
			:menuHeight="menuHeight"></navbar>

		<view class="main" :style="{ height: mainheight + 'px' }">123</view>
		<!-- 公告 -->
		<uni-notice-bar show-icon scrollable class="ggdata" :text="ggtext" v-if="ggtext != ''" />
		<!-- 当前预约概览 -->
		<view class="tjbox">
			<view class="tjtitle">当前预约概览</view>
			<view class="tjmain">
				<view class="tjitem tjitems">
					<view class="">预约数</view>
					<view class="tjitemnuber">
						{{ yldata.appointmentNumber }}
					</view>
				</view>
				<view class="tjitem">
					<view class="">房间预约</view>
					<view class="tjitemnuber">
						{{ yldata.roomAppointmentNumber }}
					</view>
				</view>
				<view class="tjitem">
					<view class="">设备借用</view>
					<view class="tjitemnuber">
						{{ yldata.deviceAppointmentNumber }}
					</view>
				</view>
				<view class="tjitem">
					<view class="">审核通过</view>
					<view class="tjitemnuber">
						{{ yldata.auditPassNumber }}
					</view>
				</view>
			</view>
		</view>

		<!-- 分类统计 -->
		<view class="tjboxs">
			<view class="tjtitle">分类统计</view>
			<view class="tjmains">
				<view class="tjer">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" :canvas2d="true" @tap="ontapd()"
						canvasId="hDlSBJbMlFdKNHOczgMUrAfioHZfNtuw" />
				</view>
				<view class="tjer tjers">
					<view class="tjeritem">
						<view class="tjerf">
							<view class="tjerfview"></view>
						</view>
						<view class="tjert">
							<view class="">房间预约</view>
							<view class="tjertnb">
								{{ fldata.roomAppointmentNumber }}
							</view>
						</view>
						<view class="tjert">
							<view class="">通过率</view>
							<view class="tjertnb">{{ fldata.roomAppointmentPassRate }}%</view>
						</view>
					</view>
					<view class="tjeritem">
						<view class="tjerf">
							<view class="tjerfview tjerfviews"></view>
						</view>
						<view class="tjert">
							<view class="">设备借用</view>
							<view class="tjertnb">
								{{ fldata.deviceAppointmentNumber }}
							</view>
						</view>
						<view class="tjert">
							<view class="">通过率</view>
							<view class="tjertnb">
								{{ fldata.deviceAppointmentPassRate }}%
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 近十天 -->

		<view class="tjboxss">
			<view class="tjtitles">
				核心指标
				<span>（近10天趋势）</span>
			</view>

			<view class="charts-box">
				<qiun-data-charts type="area" :opts="optss" :chartData="chartDatas" />
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="zwdb"></view>
		<tabar current="0"></tabar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ggtext: "",
				title: "预约",
				navBarHeight: 0, // 导航栏高度
				menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
				menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				mainheight: 0,
				yldata: {},
				chartDatas: {},
				chartData: {},
				fldata: {},
				optss: {
					color: ["#407DFC"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						fontSize: 10,
					},
					yAxis: {
						data: [{
							tofix: 0,
							min: 0,
							max: 1,
							// title: "个",
						}, ],
						labelShow: false,
						// gridType: "dash",
						dashLength: 2,
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow",
						},
						tooltip: {
							showBox: true,
							showArrow: false,
							showCategory: false,
							legendShow: false,
						},
					},
				},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#5ADCA5", "#1371FF"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
					},

					title: {
						name: "审批通过率",
						fontSize: 10,
						color: "#666666",
					},
					subtitle: {
						name: "70%",
						fontSize: 10,
						color: "#7cb5ec",
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.9,
							activeRadius: 8,
							offsetAngle: 0,
							labelWidth: 10,
							border: false,
							borderWidth: 0,
							borderColor: "#FFFFFF",
						},
						tooltip: {
							showBox: true,
							showArrow: false,
							showCategory: false,
							legendShow: false,
						},
					},
				},
			};
		},
		onLoad() {
			const that = this;
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			that.navBarHeight = systemInfo.statusBarHeight + 44;
			that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.menuTop = menuButtonInfo.top;
			that.menuHeight = menuButtonInfo.height;
			that.mainheight = menuButtonInfo.top + menuButtonInfo.height;
			this.$myRequest({
				url: "/client/appointmentUser/systemNotify",
				method: "GET",
			}).then((res) => {
				console.log("返回公告", res.data.content);
				this.ggtext = res.data.content;
			});
		},
		created() {
			// 获取数据
			this.yldatafn();
			// 获取数据
			this.getServerData();
		},
		beforeMount() {},
		methods: {
			ontapd() {
				// var index = uChartsInstance[e.target.id].getCurrentDataIndex(e);
				// console.log(index);
			},
			yldatafn() {
				this.$myRequest({
					url: "/client/appointmentStatistics/number",
					method: "GET",
				}).then((res) => {
					console.log("返回数据", res);
					if (res.code == 200) {
						this.yldata = res.data;
						console.log("this.yl", res.data, this.yldata.auditPassNumber);
					}
				});
			},
			getServerData() {
				//
				this.$myRequest({
					url: "/client/appointmentStatistics/pass",
					method: "GET",
				}).then((res) => {
					console.log("返回数据");
					if (res.code == 200) {
						this.fldata = res.data;

						this.opts.subtitle.name = res.data.roomAppointmentPassRate + "%";

						this.chartData = JSON.parse(
							JSON.stringify({
								series: [{
									data: [{
											name: "房间设备数",
											value: res.data.roomAppointmentNumber,
										},
										{
											name: "房间设备数",
											value: res.data.deviceAppointmentNumber,
										},
									],
								}, ],
							})
						);
					}
				});
				// 获取数据完成  获取第二次数据
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = ("0" + (currentDate.getMonth() + 1)).slice(-2);
				let day = ("0" + currentDate.getDate()).slice(-2);
				let currentDates = `${year}-${month}-${day}`;
				// 上面当前时间
				// 下面获取十天前
				// 获取十天前的时间
				let tenDaysAgo = new Date(
					currentDate.getTime() - 10 * 24 * 60 * 60 * 1000
				); // 10天前的毫秒数

				// 获取年、月、日
				let years = tenDaysAgo.getFullYear();
				let months = ("0" + (tenDaysAgo.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1并且保证两位数
				let days = ("0" + tenDaysAgo.getDate()).slice(-2); // 获取日期，并保证两位数

				// 格式化成 yyyy-MM-dd
				let formattedDate = `${years}-${months}-${days}`;
				this.$myRequest({
					url: "/client/appointmentStatistics/trend",
					method: "GET",
					data: {
						startDate: formattedDate,
						endDate: currentDates,
					},
				}).then((res) => {
					console.log("返回数据");
					if (res.code == 200) {
						const foundItem = res.data.find((item) => item.number > 10);

						if (foundItem) {
							this.$nextTick(() => {
								this.optss.yAxis.data[0].max = foundItem.number + 1;
							});
							console.log(
								"数组中第一个 number 大于 10 的元素是:",
								foundItem.number,
								this.optss.yAxis.data.max
							);
						} else {
							this.$nextTick(() => {
								this.optss.yAxis.data[0].max = 10;
							});
							console.log(
								"数组中不存在 number 大于 10 的元素。",
								this.optss.yAxis.data[0].max
							);
						}
						// 定义年份范围
						let yearRange = [];

						// 初始化数据结构
						let series = [{
							name: "预约数量",
							data: [], // 初始化长度为年份范围长度的数组，初始值为0
						}, ];

						// 遍历原始数据，填充数据结构
						res.data.forEach((item, index) => {
							yearRange[index] = item.date;
							series[0].data[index] = item.number;
						});

						// 最终格式
						let result = {
							categories: yearRange,
							series: series,
						};

						// let res = {
						// 	categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						// 	series: [{
						// 		name: "预约数量",
						// 		data: [35, 8, 25, 37, 4, 20],
						// 	}, ],
						// };
						this.chartDatas = JSON.parse(JSON.stringify(result));
					}
				});
			},
		},
	};
</script>

<style>
	@import "@/pages/index/index.css";
</style>